<script lang="ts">
export default {
    name: 'SvgIconList'
}
</script>

<script setup lang="ts">
import useSvgIcon from '@/composables/system/svgicon/useSvgIcon';

const props = defineProps({
    operation: {//弹框标题
        type: String,
        default: 'list'
    },
    parentIcon: {
        type: String,
        default: ''
    },
    currentIcon: {
        type: String,
        default: ''
    }
})

const emit = defineEmits(['selectIcon'])

// 表格的数据获取
const { iconActive, listParam, searchBtn, iconData, chooseIcon } = useSvgIcon(emit, props)

</script>
<template>
    <el-main>
        <div :class="['icon-container', props.operation != 'list' ? 'no-pading' : '']" id="iconContainer">
            <div class="icon-search">
                <el-input v-model="listParam.name" placeholder="Search Icons" prefix-icon="Search" :clearable="true"
                    @input="searchBtn" />
            </div>
            <div class="icon-block" v-for="item in iconData.data" :id="'icon-' + item.name">
                <div class="title">
                    {{ item.name }}
                </div>
                <div class="icon-items">
                    <div v-for="icon in item.children" :class="['icon-item', iconActive == icon.name ? 'active' : '']"
                        :id="'icon-' + icon.name" @click="chooseIcon(icon.id, item.name, icon.name)">
                        <div class="icon-info">
                            <svg-icon :prefix="item.name" svgClass="svg-icon-14" :icon-class="icon.name"></svg-icon>
                        </div>
                        <div class="icon-text">{{ icon.name }}</div>
                    </div>
                </div>
                <el-divider />
            </div>
        </div>
    </el-main>
</template>
<style lang="scss" scope>
.icon-container {
    padding: 20px;
    background: #FFFFFF;

    .icon-search {
        padding: 10px 50px 30px;
    }

    .icon-block {
        .icon-items {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;

            .icon-item {
                cursor: pointer;
                width: 105px;
                height: 105px;
                text-align: center;
                padding: 5px;

                .icon-info {
                    margin-top: 20px;
                }

                .icon-text {
                    margin-top: 12px;
                }
            }

            .icon-item:hover {
                color: $--color-primary;
            }
        }

        .active {
            color: $--color-primary;
        }
    }
}

.no-pading {
    padding: 0;
}
</style>